F2E合作社｜互動圖文卡片

前言

到現在還是常常出沒在各個網頁的基本構圖，揉和了 flex 、 position 、 opacity 和偽元素等等語法，日後若再稍加調整即可產出多種變化。（想更了解 flex 屬性的話可以看看 CSS保健室｜flex ）

cover

CSS

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap" rel="stylesheet">
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: 'Noto Sans TC', sans-serif;
    }
    .wrap {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .item {
        width: 25%;
        position: relative;
    }
    .item img {
        width: 100%;
        vertical-align: middle;
    }
    .item .txt {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 20px;
        background-color: rgba(0,0,0,.6);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        opacity: 0;
        transition: opacity .5s;
    }
    .item:hover .txt {
        opacity: 1;
    }
    .item h2 {
        font-size: 28px;
        color: #ff0;
        font-weight: 500;
    }
    .item h2:after {
        content: '';
        display: block;
        width: 0;
        height: 2px;
        margin: 10px 0;
        background-color: #ff0;
        transition: width .5s .5s;
    }
    .item:hover h2:after {
        width: 100%;
    }
    .item p {
        font-size: 18px;
        color: #fff;
        font-weight: 100;
    }
</style>

HTML

<div class="wrap">
    <div class="item">
        <img src="https://picsum.photos/500/400?random=10">
        <div class="txt">
            <h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/500/400?random=5">
        <div class="txt">
            <h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片-2</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/500/400?random=20">
        <div class="txt">
            <h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片-3</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/500/400?random=30">
        <div class="txt">
            <h2>金魚都能懂的這個網頁畫面怎麼切：互動圖文卡片-4</h2>
            <p>互動圖文卡片是我們在網頁中經常見到的另一種稀飯版，不會切你就遜掉囉。</p>
        </div>
    </div>
</div>

最後奉上 CSScoke 的影片教學